<template>
  <div>
    <div class="container" id="documentaryCheck">
      <div class="row">
        <div class="col-lg-12">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="h3">学生纪实项目明细</h3>
            </div>
            <div class="panel-body">
              <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover" id="dataTables">
                  <thead>
                  <tr>
                    <th class="text-center">学号</th>
                    <th class="text-center">项目</th>
                    <th class="text-center">所扣分数</th>
                    <th class="text-center">日期</th>
                    <th class="text-center">是否同意</th>
                    <th class="text-center">删除</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for='i in 4'>
                    <td>{{i}}</td>
                    <td
                      data-toggle="popover"
                      data-placement="top"
                      data-content="i">
                      {{i}}
                    </td>
                    <td>{{i}}</td>
                    <td class="center">{{i}}</td>
                    <td>
                      {{i}}
                    </td>
                    <td>
                      <span class="glyphicon glyphicon-trash" @click="myDelete($event)" ></span>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <table>
        <tr v-for="i in 4">
          <td
            data-container="body"
            data-toggle="popover"
            data-placement="top"
            :data-content="i">
            123132</td>
        </tr>
      </table>

    </div>
      <table>
        <tr v-for="i in 4">
          <td
            data-container="body"
            data-toggle="popover"
            data-placement="top"
            :data-content="i">
            123132</td>
        </tr>
      </table>
    <br><br><br>
    <table>
      <tbody>
      <tr v-for="i in 4">
        <td
          data-container="body"
          data-toggle="popover"
          data-placement="top"
          :data-content="i">
          123132</td>
      </tr>
      </tbody>
    </table>
    <ul>
      <li v-for="i in 4"
          data-container="body"
          data-toggle="popover"
          data-placement="top"
          :data-content="i">
        fasdfsdafsadfas
      </li>
    </ul>
    <a

            data-toggle="popover"
            data-placement="top"
            :data-content="test">
      Popover on 顶部
    </a>


  </div>

</template>

<script >
  import API from '../config/request'
  import '../../node_modules/bootstrap/dist/js/bootstrap'
  export default {
    data:function(){
      return{
        imgs:[],
        test:'hahaha',
        url: API.URL,
        records: [],
        projects:[]
      }
    },
    created() {
      this.getDocumentary()
    },
    mounted(){
      //      setTimeout(function () {
      //        $('#dataTables').DataTable({})
      //      }, 500)
      $('[data-toggle="popover"]').popover()
      $('[data-toggle="popover"]').popover()
    },
    methods : {
      transfrom: function (value) {
        if (!value) {
          return ''
        } else {
          let date = new Date(value);
          let Y = date.getFullYear() + '-';
          let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
          let D = date.getDate() + ' ';
          return Y + M + D
        }
      },
      //拿到项目
      getProject: function () {
        this.$http.get(this.url + 'doc').then(function (response) {
          console.log(response.body)
          for (let i in response.body) {
            //console.log(response.body[i].content.split('——')[0])
            response.body[i].myContent = response.body[i].content.split('——')[0].trim()
          }
          this.projects = response.body
        })
      },
      getDocumentary: function () {
        this.$http.get(this.url + 'documentary/getDocument').then(function (response) {
          for (let i in response.body) {
            response.body[i].date = this.transfrom(response.body[i].date)
          }
          this.records = response.body
        })
      },
      agree: function (event) {
        let id = event.target.getAttribute('data-id') //拿到id
        for (let i in this.records) {
          if (this.records[i].id == id) {
            this.$http.get(this.url + 'documentary/setDocumentaryByteacher?id=' + this.records[i].id
              + '&&studentNumber=' + this.records[i].studentNumber + '&&score=' + this.records[i].score + '&&isAgree=true').then(function (response) {
              console.log(response.body)
              if (response.body.code == 1) {
                alert("已同意")
                this.records[i].agree = 1
              }
            })
          }
        }
      },
      disagree: function (event) {
        let id = event.target.getAttribute('data-id') //拿到id
        console.log(id)
        for (let i in this.records) {
          if (this.records[i].id == id) {
            this.$http.get(this.url + 'documentary/setDocumentaryByteacher?id=' + this.records[i].id
              + '&&studentNumber=' + this.records[i].studentNumber + '&&score=' + this.records[i].score + '&&isAgree=false').then(function (response) {
              console.log(response.body)
              if (response.body.code == 1) {
                alert("已拒绝")
                this.records[i].agree = -1
              }
            })
          }
        }
      },
      myDelete: function (event) {
        let id = event.target.getAttribute('data-id') //拿到id
        console.log(id)
        for (let i in this.records) {
          if (this.records[i].id == id) {
            this.$http.get(this.url + 'documentary/delete?id=' + this.records[i].id).then(function (response) {
              console.log(response.body)
              if (response.body.code == 1) {
                alert("已删除")
                this.records.splice(i, 1)
              }
            })
          }
        }
      }
    }
  }

</script>
<style scoped >
  @import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";


</style>
